<template>
  <Header></Header>
  <div>
    <el-row>
      <el-col :offset="2" :span="2">简历</el-col>
    </el-row>
    <el-row>
      <el-col :offset="2" :span="2">
        <el-anchor
            :container="containerRef"
            direction="vertical"
            type="underline"
        >
          <el-anchor-link href="#part1" title="学生信息"/>
          <el-anchor-link href="#part2" title="求职信息"/>
          <el-anchor-link href="#part3" title="教育背景"/>
          <el-anchor-link href="#part4" title="项目经验"/>
          <el-anchor-link href="#part5" title="校园经历"/>
          <el-anchor-link href="#part6" title="实习经验"/>
          <el-anchor-link title="预览" @click="openAndFlashPreview"/>
        </el-anchor>
      </el-col>
      <el-col :span="20">
        <div ref="containerRef" style="height: 500px; overflow-y: auto">
          <div id="part1" class="part">
            <StudentInfo :student="student"></StudentInfo>
          </div>
          <div id="part2" class="part">
            <NormalInfo></NormalInfo>
          </div>
          <div id="part3" class="part">
            <EducationalBackground></EducationalBackground>
          </div>
          <div id="part4" class="part">
            <ProjectExperience></ProjectExperience>
          </div>
          <div id="part5" class="part">
            <CompusExperience></CompusExperience>
          </div>
          <div id="part6" class="part">
            <InternshipExperience></InternshipExperience>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
  <div>
    <el-dialog v-model="showPreviewDialog">
      <PreviewResume :flash="flashPreview"></PreviewResume>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
import Header from '@/components/home/Header.vue'
import StudentInfo from "@/components/home/StudentInfo.vue";
import type {StudentInterface} from "@/model/type";
import NormalInfo from "@/components/resume/NormalInfo.vue";
import EducationalBackground from "@/components/resume/EducationalBackground.vue";
import ProjectExperience from "@/components/resume/ProjectExperience.vue";
import CompusExperience from "@/components/resume/CampusExperience.vue";
import InternshipExperience from "@/components/resume/InternshipExperience.vue";
import PreviewResume from "@/components/resume/PreviewResume.vue";

const containerRef = ref<HTMLElement | null>(null)

// 从 localStorage 中获取 user，并解析为 JavaScript 对象
const student = reactive<StudentInterface>(JSON.parse(localStorage.getItem('user')) || {})
const showPreviewDialog = ref<boolean>(false)
let flashPreview: number = ref<number>(0)

function openAndFlashPreview() {
  showPreviewDialog.value = true
  flashPreview += 1
}
</script>
<style scoped>
.part {
  height: 500px;
  background: rgba(0, 255, 0, 0.02);
}
</style>
